<template>
	<view class="shengqing">
		
		
		<view class="content">
			<view class="header">
				<image class="img" :src="userInfo.info ? userInfo.info : 'https://abc.apricity.asia/public/icon/1.jpg'" mode=""></image>
			</view>
			<view class="name">
				<view class="name_ h">
					用户名:
				</view>
				<view class="name__" v-if="apply.name.length !== 0">
					<input type="text" placeholder-style="fontSize: 14px;" v-model="apply.name" placeholder="点击获取您的用户名" />
				</view>
				<view class="name__" v-else>
					<button class="btn_get" plain @click="getUserInfo" type="default">点击获取您的用户名</button>
				</view>
			</view>
			<view class="name">
				<view class="name_ h">
					手机号:
				</view>
				<view class="name__" v-if="apply.student_card.length !== 0">
					<input type="text" placeholder-style="fontSize: 14px;"  v-model="apply.student_card" placeholder="点击获取您的手机号" />
				</view>
				<view class="name__" v-else>
					<button class="btn_get" plain  open-type="getPhoneNumber" @getphonenumber="getMobile" type="default">点击获取您的手机号</button>
				</view>
			</view>
<!-- 			<view class="student_card">
				<view class="student_card_h">
					证件号
				</view>
				<view class="student_card_b">
					<uni-file-picker 
						limit="1"
					    v-model="student_image_imageValue" 
					    fileMediatype="image" 
					    mode="grid" 
						@select="student_card_select"
					/>
				</view>
			</view> -->
			<view class="money_card">
				<view class="money_card_h">
					提现收款码
				</view>
				<view class="money_card_b">
					<uni-file-picker
						limit="1"
					    v-model="paycard_imageValue" 
					    fileMediatype="image" 
					    mode="grid" 
						@select="money_card_select"
					/>
				</view>
			</view>
			<checkbox-group  @change="reading" >
			<label class="radio"><checkbox :color=" '#007AFF'" style="transform:scale(0.7)" value="r1" class="font_icon" :checked="user_server" /><navigator url="../userApplyServer/userApplyServer">请仔细阅读接单协议</navigator>  </label></checkbox-group>
			<button type="primary" @click="btn_submit" class="btn" size="mini">确认申请</button>
		</view>
	</view>
</template>

<script>
	import { mapState } from 'vuex' 
	export default {
		data () {
			return {
				apply: {
					name: '',    // 学生的真实姓名
					student_card: '',  // 学生证号
					student_image: '',  // 学生证图片
					paycard: ''        // Formdata
				},
				student_image_imageValue: [],
				paycard_imageValue: [],
				uploadFiles: [],
				obj: [],                 // 传递过来的 
				user_server: false,
				code: ''
			}
		},
		computed: {
			...mapState(['userInfo'])
		},
		onLoad(option) {
			this.obj= JSON.parse(decodeURIComponent(option.obj || '[]'))
			this.getCode()
		},
		onShow() {
			if (this.obj.length !== 0) {
				this.apply.name = this.obj.name
				this.apply.student_card = this.obj.student_card
			}
		},
		methods: {
			getUserInfo () {
				uni.getUserProfile({
					desc: '湘小信申请获取您的用户信息',
					success: (res) => {
						this.apply.name = JSON.parse(res.rawData).nickName
					},
					fail: (res) => {
						console.log(res)
						uni.showToast({
							icon: 'none',
							title: '获取您的用户信息失败'
						})
					}
				})
			},
			// get code
			getCode () {
				wx.login({
						success: (res) => {
						this.code = res.code	
					}
				})  
			},
			// get phone
			async getMobile (e) {
				try {
					const {iv,encryptedData} = e.detail
					if (!iv || !encryptedData) return uni.showToast({
						icon: 'none',
						title: '获取手机号失败',
						duration: 2000
					})
					const {data: res} = await uni.$http.post('/pay/getUserPhone',{
						code: this.code,
						encryptedData: encryptedData,
						iv: iv
					})
					if (res.status !== 200) return uni.showToast({
						icon: 'none',
						title: res.message
						})
					this.apply.student_card = res.data.phoneNumber	
				} catch (e) {
					uni.showToast({
						icon: 'none',
						title: '获取手机号失败',
						duration: 2000
					})
				}
			},
			/*
				阅读协议
			*/
		   reading (e) {
			   if (e.detail.value.length === 1 ) return this.user_server = true
			   else return this.user_server = false
		   },
			/*
				返回
			*/
			backfun () {
				uni.navigateBack()
			},
			/*
				学生证图片
			*/
		   student_card_select (e) {
			   this.apply.student_image = e.tempFilePaths[0]
		   },
		   /*
				款码
		   */
		  money_card_select (e) {
			   this.apply.paycard = e.tempFilePaths[0]
		  },
		   /*
				提交申请接单信息
		   */
		  btn_submit () {
				let _this = this
				if (!this.user_server) return uni.showToast({
					title: '请先阅读接单电子协议',
					duration: 1500,
					icon: 'none'
				})
			 if (this.apply.name.trim().length === 0 || this.apply.student_card.trim().length === 0 || !this.apply.paycard) {
				 return uni.showToast({
				 	title: '请选择',
					icon: 'none'
				 })
			 }
			 uni.showLoading({
			 	title: '上传数据中，请等待'
			 })
			 uni.uploadFile({
			 	url: 'https://www.apricity.asia:8911/apply/addapply',
			 	filePath: this.apply.paycard,
			 	name: 'paycard',
			 	formData: this.apply,
			 	header: {
			 		Authorization: uni.getStorageSync('token')
			 	},
			 	success(res) {
					console.log(res)
			 		if (JSON.parse(res.data).status!== 0 ) return uni.showToast({
			 				title: JSON.parse(res.data).message,
			 				icon: 'none'
			 		})
					uni.showToast({
						icon: 'none',
						title: '申请成功',
						duration: 2000
					})
					uni.showModal({
						title: '订阅申请信息',
						content: '为了更好的服务，我们将发送申请结果给您',
						confirmText: '同意',
						cancelText: '不同意',
						success: (res) => {
							if (res.confirm) {
								uni.requestSubscribeMessage({
									tmplIds: ['R-kNVHHKfYrSvbFZisfYGiP2UnRxc3Dr3EZ2M1IKU9k'],
									success: async (res) => {
										console.log(res)
										if (res['R-kNVHHKfYrSvbFZisfYGiP2UnRxc3Dr3EZ2M1IKU9k'] !== 'accept') return
										let prames = {
											code: _this.code,
											template_id: 'R-kNVHHKfYrSvbFZisfYGiP2UnRxc3Dr3EZ2M1IKU9k'
										}
										const {data: res2} = await uni.$http.post('/message/addWenXinMessage',prames)
										if (res2.status !== 200) return uni.showToast({
											icon: 'none',
											title: '订阅失败',
											duration: 2000
										})
									},
									fail: (res) => {
										console.log(res)
									},
									complete: (res) => {
										
									}
								})
							}
						} 
					})
			 	},
			 	fail(e2) {
			 		return uni.showToast({
			 			title: e2,
			 			icon: 'none'
			 		})
			 	}
			 })
		  }
		}
	}
</script>

<style scoped lang="scss">
	.btn_get {
		border: none !important;
		font-size: 12px;
		color: #f4f4f5;
	}
	.shengqing {
		height: 800px;
	}
	.h {
		font-size: 14px;
		font-weight: 800;
		color: #303133;
		display: block;
		width: 25%;
	}
	.content {
		box-shadow: 0px 3px 3px #c8c8c8 ;
		background-color: #FFFFFF;
		margin: 50px 15px 15px 15px;
		padding: 0 10px 10px 10px;
		.header {
			height: 30px;
			position: relative;
			display: flex;
			justify-content: center;
			align-items: center;
			margin-bottom: 20px;
			.img {
				position: absolute;
				width: 60px;
				height: 60px;
				border-radius: 50%;
				border: 1px solid #07C160;
			}
		}
		.name {
			margin-top: 10px;
			border-bottom: 1px solid #FFF7CC;
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 30px;
			width: 100%;
			.name_ {
				width: 30%;
			}
			.name__ {
				width: 60%;
				font-size: 12px;
			}
		}
		.student_card {
			
			display: flex;
			flex-direction: column;
			justify-content: left;
			margin-top: 10px;
			border-bottom: 1px solid #FFF7CC;
			.student_card_b {
				margin-top: 10px;
				width: 80%;
				height: 100px;
			}

			.student_card_h {
				
			}
			
		}
		.money_card {
			display: flex;
			flex-direction: column;
			justify-content: left;
			margin-top: 10px;
			border-bottom: 1px solid #FFF7CC;
			.money_card_h {
				
			}
			.money_card_b {
				margin-top: 10px;
				width: 80%;
				height: 100px;
			}
		}
		.btn {
			color: #FFFFFF;
			display: flex;
			justify-content: center;
			margin-top: 10px;
			height: 40px;
			font-size: 16px;
			line-height: 40px;
		}
	}
	.radio {
		font-size: 13px;
		color: #007AFF;
		margin: 5px 0;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.font_icon {
		font-size: 12px;
	}
</style>

